<template>
  <div>
    <!-- 筛选条件 -->
    <van-sticky offset-top="50">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="queryFilterData.teachBuildingId"
          :options="ttOp"
          @closed="queryChange"
        >
          <template #title>
            {{ nowTt ? nowTt.text:'选择教学楼' }}
          </template>
        </van-dropdown-item>
        <van-dropdown-item
          v-model="queryFilterData.typeId"
          :options="typeOp"
          @closed="queryChange"
        >
          <template #title>
            {{ nowType ? nowType.text:'选择教室类型' }}
          </template>
        </van-dropdown-item>
        <van-dropdown-item
          v-model="queryFilterData.hcOpidx"
          :options="hcOp"
          @closed="queryChange"
        >
          <template #title>
            {{ nowHc ? nowHc.text:'选择容量大小' }}
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <!-- 数据展示列表 -->
    <van-list
      v-model="listControl.loading"
      :finished="listControl.finished"
      :error="listControl.error"
      finished-text="已经到底了"
      error-text="出错了，加载数据失败~"
      @load="loadNewData"
    >
      <!-- <van-cell
        v-for="cr in classroomDataList"
        :key="cr.id"
        style="height: 3rem;margin-top: 0.3rem;"
        :title="cr.roomName"
      /> -->
      <van-card
        v-for="cr in classroomDataList"
        :key="cr.id"
        :desc="`可容纳：${cr.headCount}人`"
        thumb="./images/classroom-item.jpg"
      >
        <template #title>
          <span style="font-size: medium;font-weight: bold;">{{ cr.roomName }}</span>
        </template>
        <template #tags>
          <van-tag
            mark
            type="primary"
          >{{ cr.teachBuildingName }}</van-tag>
          <van-tag
            mark
            type="warning"
            style="margin-left: 0.1rem;"
          >{{ cr.typeName }}</van-tag>
        </template>
        <template #price>
          <van-tag
            :type="cr.available? 'success':'danger'"
            mark
            style="font-size: 0.3rem;height: 0.6rem;"
          >
            {{ cr.occupyMessage }}
          </van-tag>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>

import { Cell, CellGroup, Tag, Sticky, DropdownMenu, DropdownItem, List, Card } from 'vant'
import { getTeachBuildingDropdown, getClassroomTypeDropdown } from '@/api/bussiness/organization/dropdown'
import { lazylistByNow } from '@/api/bussiness/organization/classroom'
import { transDropDown } from '@/utils/dropdown'

export default {
  name: 'OrganizationClassroom',
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Tag.name]: Tag,
    [Sticky.name]: Sticky,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [List.name]: List,
    [Card.name]: Card
  },
  data () {
    return {
      queryFilterData: { // 查询条件数据
        teachBuildingId: null,
        typeId: null,
        hcOpidx: null
      },
      lazyQueryInfo: {
        currentPos: 0,
        chunkSize: 10
      },
      ttOp: [ // 教学楼选项
      ],
      typeOp: [ // 教室类型选项
      ],
      hcOp: [ // 教室容纳人数查询选项
      ],
      listControl: { // 数据列表控制变量
        loading: false,
        finished: false,
        error: false
      },
      classroomDataList: [// 教室数据列表
      ]
    }
  },
  computed: {
    nowTt () {
      return this.ttOp.find(op => op.value === this.queryFilterData.teachBuildingId)
    },
    nowType () {
      return this.typeOp.find(op => op.value === this.queryFilterData.typeId)
    },
    nowHc () {
      return this.hcOp.find(op => op.value === this.queryFilterData.hcOpidx)
    },
    queryFormData () {
      const { teachBuildingId, typeId } = this.queryFilterData
      const data = {
        lazyQueryInfo: this.lazyQueryInfo,
        teachBuildingId,
        typeId
      }
      if (this.nowHc) {
        data.minHeadCount = this.nowHc.minHc
        data.maxHeadCount = this.nowHc.maxHc
      }
      return data
    }
  },
  created () {
    this.loadOpdata()
  }, methods: {
    loadOpdata () { // 加载筛选条件下拉数据
      getTeachBuildingDropdown().then(({ data }) => {
        this.ttOp = transDropDown(data)
      }).catch(() => { })
      getClassroomTypeDropdown().then(({ data }) => {
        this.typeOp = transDropDown(data)
      })
      this.hcOp = [ // 教室容纳人数查询选项
        { text: '20-49', value: 0, minHc: 20, maxHc: 49 },
        { text: '50-99', value: 1, minHc: 50, maxHc: 99 },
        { text: '100-199', value: 2, minHc: 100, maxHc: 199 },
        { text: '200-400', value: 3, minHc: 200, maxHc: 400 }
      ]
    },
    queryChange () { // 处理查询条件改变
      this.classroomDataList = []
      this.lazyQueryInfo.currentPos = 0
      this.refreshListData()
    },
    refreshListData () { // 刷新列表数据
      this.listControl.loading = true
      lazylistByNow(this.queryFormData).then(({ list }) => {
        this.listControl.loading = false
        this.classroomDataList.push(...list)
        // 判断数据是否加载完毕，依据是list的size < chunkSize
        if (list.length < this.lazyQueryInfo.chunkSize) {
          this.listControl.finished = true
        }
      }).catch(() => { this.listControl.error = true })
    },
    loadNewData () { // 数据列表到底部时触发，加载新数据
      this.refreshListData()
      this.lazyQueryInfo.currentPos += this.lazyQueryInfo.chunkSize
    }
  }
}
</script>

<style>
</style>
